<template>
	<view class="NangChang">
		<view class="one flex" style="position: relative;">
			<image
				:src="!userdata.avatar?'https://hilton-duoladuo.oss-cn-shenzhen.aliyuncs.com/basic-common/upload/680ae589463da387fd39ef10.jpg':userdata.avatar"
				mode="" style="width: 120rpx;height: 120rpx;">
			</image>
			<view class="one_right flexDeCo">
				<view class="or_top">
					<view class="ort_one">{{userdata.nickname}}</view>
					<view class="v flex" style="width: 120rpx; position: absolute; right: 0rpx;  font-size: 25rpx;">
						<image src="/static/images/NangCahng/MembershipLevel.png" mode=""
							style="width: 40rpx;height: 40rpx;">
						</image>
						&nbsp;&nbsp;&nbsp;{{member.levelName}}
					</view>

				</view>
				<view class="or_middle or_item">
					地区：南昌市
				</view>
				<view class="or_bottom or_item">
					在找：<view v-for="item in dzlist" style="display: inline;">{{item}} 、</view>
				</view>
			</view>
		</view>
		<view class="two flex_jcsb" @tap="navTo">
			<view class="two_left flex">
				<image src="/static/images/NangCahng/MembershipLevel.png" mode="" class="tl_one"></image>
				<view class="tl_two">会员等级</view>
			</view>
			<view class="two_right">{{member.levelName}}</view>
		</view>
		<view class="three">
			搭子动态
		</view>
		<view class="four flex bc_p15_bs" v-for="(item,index) in bbslist" style="flex-wrap: wrap;">
			<!-- <image
				:src="!userdata.avatar?'https://hilton-duoladuo.oss-cn-shenzhen.aliyuncs.com/basic-common/upload/680ae589463da387fd39ef10.jpg':userdata.avatar"
				mode="" style="width: 120rpx;height: 120rpx;">
			</image> -->
			<!-- <image v-if="item.coverList.length > 0"
				:src="item.coverList && item.coverList.length > 0 ? item.coverList[0] : ''" mode=""
				style="width: 120rpx;height: 120rpx;">
			</image> -->

			<image
				:src="item.creatorAvatar != null && item.creatorAvatar != '' ? item.creatorAvatar : 'https://hilton-duoladuo.oss-cn-shenzhen.aliyuncs.com/basic-common/upload/680ae589463da387fd39ef10.jpg'"
				mode="" style="width: 120rpx;height: 120rpx;">
			</image>

			<view class="four_right flexDeCo">
				<view class="fr_top" @tap="goToNewPage(item, 'd')">{{ item.title | truncate(15) }}</view>
				<view class="fr_bottom flex_jcsb">
					<view class="frb_left">
						{{ item.creator != null && item.creator != '' ? item.creator : userdata.nickname }}
					</view>
					<view class="frb_right">
						{{item.createTime}}
					</view>
				</view>
			</view>
			<view v-if="item.cover" style="width: 100%; display: flex; margin-top: 40rpx;">
				<view v-for="(items,index) in item.coverList" class="dzimg" style="width: 23%;margin-right: 20rpx;">
					<img style="height: 140rpx; width: 140rpx;"
						:src="!items?'https://hilton-duoladuo.oss-cn-shenzhen.aliyuncs.com/basic-common/upload/680ae589463da387fd39ef10.jpg':items"></img>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		navigateTo
	} from "@/utils/promise"
	import {
		getUserByid
	} from "../../api/user.js"
	import {
		bbsList
	} from "../../api/bbs.js"
	import {
		memberByUserId
	} from "../../api/member.js"
	export default {
		data() {
			return {
				userdata: {},
				member: {},
				bbslist: {},
				dzlist: [],
				dzlistimg: []
			};
		},
		filters: {
			truncate(value, length) {
				if (!value) return ''
				if (value.length > length) {
					return value.substring(0, length) + '...'
				}
				return value
			}
		},
		methods: {
			goToPatnerActivies() {
				uni.navigateTo({
					url: '/pages/PartnerActivitiesPage/PartnerActivitiesPage'
				});
			},
			navTo() {
				navigateTo("/pages/MembershipCodePage/MembershipCodePage")
			},
			goToNewPage(item, flag) {
				this.$emit("gotoNewPage")

				if (flag == 'd') {
					navigateTo({
						url: `/pages/PartnerActivitiesPage/PartnerActivitiesPage?id=` + item.id
					})
				} else if (flag == 'u') {
					navigateTo({
						url: `/pages/NanChangPage/NanChangPage?id=` + item.userId
					})
				}
			},
		},
		onLoad(options) {

			getUserByid(options.id).then(response => {
				this.userdata = response.data;
			});
			memberByUserId(options.id).then(response => {
				this.member = response.data;
			})
			bbsList({
				"userId": options.id
			}).then(response => {
				this.bbslist = response.data.records;
				var item = null;
				var dzlists = [];



				//循环用户的搭子 判断在找什么
				for (item in this.bbslist) {
					this.bbslist[item].cover == "" ? this.bbslist[item].cover = null : "";
					// if(this.bbslist[item.cover] == ""){
					// 	this
					// }else{
					// 	this.bbslist[item].cover = this.bbslist[item].cover.replace("[","");
					// 	this.bbslist[item].cover = this.bbslist[item].cover.replace("]","");
					// 	this.bbslist[item].cover = this.bbslist[item].cover.replace(" ","");
					// 	this.bbslist[item].cover = this.bbslist[item].cover.split(",")
					// }

					switch (this.bbslist[item].type) {
						case 0:
							dzlists.push("周边游")
							break;
						case 1:
							dzlists.push("本地美食")
							break;
						case 2:
							dzlists.push("景区景点")
							break;
						case 3:
							dzlists.push("娱乐活动")
							break;
					}
				}
				this.dzlist = Array.from(new Set(dzlists))
				console.log(this.bbslist)
			});
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.NangChang {
		background-color: rgb(247, 247, 247);
		width: 100vw;
		box-sizing: border-box;
		min-height: 100vh;
		color: #222222;
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 24rpx;
		letter-spacing: -0.82rpx;
		padding-top: 20rpx;
		padding-bottom: 40rpx;

		.one {
			padding: 30rpx;
			width: 690rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			align-items: center;
			box-sizing: border-box;
			margin: 0 auto;

			.one_right {
				margin-left: 20rpx;

				.or_top {
					display: flex;
					font-family: 'PingFang SC';
					align-items: center;

					.ort_one {
						font-weight: 600;
						font-size: 28rpx;
						line-height: 44rpx;
						letter-spacing: -0.82rpx;
					}

					.v {
						font-size: 50rpx;
						// font-weight: 700;
						/*color: rgb(189, 198, 214);*/
						margin-left: 14rpx;

					}

					.or_topText {
						width: 128rpx;
						height: 36rpx;
						border-top-right-radius: 18rpx;
						border-bottom-right-radius: 18rpx;
						text-align: center;
						background: linear-gradient(180deg, #BFCCDE 0%, #99A8B8 100%);
						font-weight: 400;
						font-size: 24rpx;
						letter-spacing: -0.82rpx;
						color: #FFFFFF;
						margin-left: 18rpx;

						image {
							position: relative;
							background: linear-gradient(180deg, #BFCCDE 0%, #99A8B8 100%);

							text {
								position: absolute;
								color: #FFFFFF;
								top: 0;
								right: 17rpx
							}
						}
					}
				}

				.or_item {
					font-weight: 400;
					font-size: 24rpx;
					letter-spacing: -0.82rpx;
					color: #979797;
				}

				.or_middle {
					margin-top: 8rpx;

				}

				.or_bottom {
					margin-top: 8rpx;
				}
			}
		}

		.two {
			width: 690rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			margin: 20rpx auto 0 auto;
			padding: 30rpx;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 28rpx;
			letter-spacing: -0.82rpx;

			.two_left {
				.tl_one {
					width: 48rpx;
					height: 44rpx;
				}

				.tl_two {
					// font-weight: 400;
					font-size: 28rpx;
					letter-spacing: -0.82rpx;
					margin-left: 8rpx;

				}
			}

		}

		.three {
			font-weight: 600;
			font-size: 30rpx;
			letter-spacing: -0.82rpx;
			text-align: center;
			margin-top: 40rpx;
		}

		.four {
			width: 690rpx;
			margin: 20rpx auto 0 auto;
			border-radius: 16rpx;

			.four_left_img {
				width: 120rpx;
				height: 120rpx;
			}

			.four_right {
				margin-left: 20rpx;
				justify-content: space-between;
				flex: 1;
				height: 100rpx;

				.fr_top {
					font-weight: 600;
					font-size: 28rpx;
					letter-spacing: -0.82rpx;
				}

				.fr_bottom {
					font-weight: 400;
					font-size: 26rpx;
					letter-spacing: -0.82rpx;
					color: #979797;
					justify-content: space-between;

					.frb_left {
						width: 260rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

				}
			}


		}
	}
</style>